<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<body>
<div class="pull-left">
    <div class="form-group form-inline">
        总共${pb.pages}页，共${pb.total}条数据。 每页
        <select class="form-control" id="selectSize">
            <option value="3" ${pb.pageSize == 3 ?"selected":""}>3</option>
            <option value="5" ${pb.pageSize == 5 ?"selected":""}>5</option>
            <option value="10" ${pb.pageSize == 10 ?"selected":""}>10</option>
            <option value="15" ${pb.pageSize == 15 ?"selected":""}>15</option>
            <option value="20" ${pb.pageSize == 20 ?"selected":""}>20</option>
        </select> 条
    </div>
</div>


<div class="box-tools pull-right">
    <ul class="pagination">
        <c:if test="${pb.pageNum!=1}">
            <li>
                <a href="javascript:topage('1')" aria-label="Previous">首页</a>
            </li>
            <li><a href="javascript:topage('${pb.pageNum-1}')">上一页</a></li>
        </c:if>
        <c:if test="${! empty pb.list}">
            <c:forEach begin="${pb.navigateFirstPage}" end="${pb.navigateLastPage}" step="1" var="pageNum">
                <li><a href="javascript:topage('${pageNum}')" >${pageNum}</a></li>
                <%--class="getLiToPage"--%>
            </c:forEach>
        </c:if>

        <c:if test="${pb.pageNum!=pb.pages}">
            <li><a href="javascript:topage('${pb.pageNum+1}')">下一页</a></li>
            <li>
                <a href="javascript:topage('${pb.pages}')"
                   aria-label="Next">尾页</a>
            </li>
        </c:if>
    </ul>
</div>

<form id="pageForm" action="${param.pageUrl}" method="post">
    <input type="hidden" name="pageNum" id="pageNum" value="1">
    <input type="hidden" name="pageSize" id="pageSize" value="3">
</form>
<script>
    function topage(page) {
        $("#pageNum").val(page);
        $("#pageSize").val(getSelectValue())
        $("#pageForm").submit();
    }

    function getSelectValue() {
        $("#selectSize").val();
        var options = $("#selectSize option:selected");
        let value = options.val();
        return value;
    }

    $("#selectSize").change(function () {
        let page = 1;
        topage(page)
    });
</script>
</body>
</html>
